<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			let userList = [
				{
					name: "林俊杰",
					age: 21,
					grade: "20224128",
					sex: 0,
					hobby: undefined
				},
				{
					name: "邓紫棋",
					age: 21,
					grade: "20224129",
					sex: 1,
					hobby: null
				},
				{
					name: "刘德华",
					age: 20,
					grade: "20224128",
					sex: 0,
					hobby: ["演唱会", "拍电影"]
				},
				{
					name: "Beyond",
					age: 26,
					grade: "20224128",
					sex: 0,
					hobby: []
				},
				{
					name: "杨幂",
					age: 20,
					grade: "20224129",
					sex: 1,
					hobby: ["追剧"]
				},
				{
					name: "周杰伦",
					age: 21,
					grade: "20224128",
					sex: 0,
					hobby: ["唱歌", "mojito"]
				},
				{
					name: "kunkun",
					age: 19,
					grade: "20224129",
					sex: 0,
					hobby: ["唱", "跳", "rap", "篮球"]
				}
			]
		</script>
		<style>
			table {
				border: 1px solid #cccccc;
			}
			th,td {
				border: 1px solid #cccccc;
				width: 200px;
				/* 单元格内文本水平对齐方式 */
				text-align: center;
			}
			thead {
				background-color: #ffaa00;
			}
			/* 加给偶数行的背景 */
			.tr-0 {
				background-color: #f3f3f3;
			}
			/* 加给奇数行的背景 */
			.tr-1 {
				background-color: #cccccc;
			}
		</style>
	</head>
	<body>
		<table cellspacing="0">
			<thead>
				<tr>
					<th>姓名</th>
					<th>年龄</th>
					<th>班级</th>
					<th>性别</th>
					<th>爱好</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<tr class="tr-1">
					<td>张三</td>
					<td>20</td>
					<td>20232123</td>
					<td>男</td>
					<td>看电影,听音乐</td>
					<td>
						<!-- this用到哪个标签中，就代表这个标签本身的对象 -->
						<button onclick="del(this)">删除</button>
					</td>
				</tr>
			</tbody>
		</table>
	</body>
	<script>
		// 删除目标行
		function del(obj) {
			// 删除
			obj.parentElement.parentElement.remove()
			// 重新定义奇偶行
			changeStyle()
		}
		
		function changeStyle() {
			// 获取到tbody下的所有tr元素，排除第一行标题行，剩余元素循环判断
			let trs = document.getElementsByTagName('tr') // 数组
			// 循环所有数据行
			for(let i = 1; i < trs.length; i ++) {
				// i为1，表示第一个数据行，奇数行
				if(i % 2 === 0) {
					// 偶数行
					trs[i].className = 'tr-0'
				} else {
					// 奇数行
					trs[i].className = 'tr-1'
				}
			}
		}
		
		// 初始化渲染表格
		function init() {
			// 获取tbody
			let tBody = document.getElementsByTagName('tbody')[0]
			// 遍历数组，循环1、2、3
			for(let i = 0; i < userList.length; i ++) {
				// 获取当前user对象
				let user = userList[i] // 索引值是从0 到 length - 1
				
				// 1.创建tr
				let new_tr = document.createElement('tr')
				// 2.修改tr，6个小步骤，添加6个td
				// 2.1增加姓名单元格
				let new_td = document.createElement('td')
				new_td.innerText = user.name
				new_tr.appendChild(new_td)
				// 2.2增加年龄单元格
				new_td = document.createElement('td')
				new_td.innerText = user.age
				new_tr.appendChild(new_td)
				// 2.3增加班级单元格
				new_td = document.createElement('td')
				new_td.innerText = user.grade
				new_tr.appendChild(new_td)
				// 2.4增加性别单元格
				new_td = document.createElement('td')
				new_td.innerText = user.sex === 0 ? '男' : '女'
				new_tr.appendChild(new_td)
				// 2.5增加爱好单元格
				new_td = document.createElement('td')
				new_td.innerText = user.hobby === undefined ? '' : user.hobby
				new_tr.appendChild(new_td)
				// 2.6增加删除按钮单元格
				new_td = document.createElement('td')
				new_td.innerHTML = "<button onclick='del(this)'>删除</button>"
				new_tr.appendChild(new_td)
				// 2.7为tr增加class
				// i的奇偶性和行的奇偶性一致
				// if(i % 2 === 0) {
				// 	// 偶数行
				// 	new_tr.className = 'tr-0'
				// } else {
				// 	new_tr.className = 'tr-1'
				// }
				// 3.将tr追加到tbody
				tBody.appendChild(new_tr)
			}
			// 获取所有的tr，改class
			changeStyle()
		}
		init()
	</script>
</html>